<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getHomeNoticeApi } from '@/common/apis/home'
import type { HomeNotice } from '@/common/types/home-type'

const noticeData = ref<HomeNotice[]>()

const getHomeNoticeData = async () => {
  const res = await getHomeNoticeApi()
  // console.log(res.data.data, 'res')
  noticeData.value = res.data.data
}


onMounted(() => {
  getHomeNoticeData()
})

</script>



<template>
  <div class="announcement">
    <h3>通知公告</h3>
    <div v-for="(item, index) in noticeData" :key="index">
      <div class="announcement-author">
        <a-image style="width: 30px" :preview="false" :src="item.icon" mode="scaleToFill" />
        <div class="announcement-author-content">
          <h4>{{ item.notice }}</h4>
          <h5>{{ item.createTime }}</h5>
        </div>
      </div>
      <!-- 下划线 -->
      <a-divider />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.announcement {
  width: 100%;
  padding: 20px;
  border-radius: 5px;
  background-color: white;

  &-author {
    display: flex;
    margin-top: 20px;

    &-content {
      margin-left: 10px;
    }
  }
}
</style>
